<template>
  <div class="singer-detail">
    <div class="s-brief">
      <h2>歌手简介</h2>
      <p class="t-txt">{{ singerSelf }}</p>
    </div>
    <div class="s-content" v-for="(item, index) in briefs" :key="index">
      <h2>{{ item.ti }}</h2>
      <p v-html="item.txt" class="t-txt"></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineExpose, ref } from 'vue'
import { getSingerDetail } from '@/service/singer'

const singerSelf = ref([])
const briefs = ref([])

function getDetail(id: number) {
  getSingerDetail(id).then((res: any) => {
    singerSelf.value = res.briefDesc
    briefs.value = res.introduction
    briefs.value.forEach((item: any) => {
      //简单对数据处理 便于展示美观
      item.txt = item.txt.replace(/▪/g, '<br/>▪')
      // item.txt = item.txt.replace(/^\d{4}'年'$/g, "111");
    })
  })
}
defineExpose({
  getDetail
})
</script>

<style scoped lang="less">
.singer-detail {
  line-height: 1.5;
  color: #666;
  font-size: 15px;
  h2 {
    font-size: 20px;
    margin: 10px 0;
    font-weight: bold;
    color: #333;
  }
  .t-txt {
    text-indent: 24px;
  }
}
</style>
